<template>
	<view class="u-steps-item" ref="u-steps-item" :class="[`u-steps-item--${parentData.direction}`]">
		<view class="u-steps-item__line" v-if="index + 1 < childLength"
			:class="[`u-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
		<view class="u-steps-item__wrapper"
			:class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]"
			:style="{ background: background }">
			<slot name="icon">
				<view class="u-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
					backgroundColor: statusColor
				}">

				</view>
				<view class="u-steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
					<u-icon :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
						:size="iconSize"
						:color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor">
					</u-icon>
				</view>
				<view v-else :style="{
					backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
					borderColor: statusColor
				}" class="u-steps-item__wrapper__circle">
					<text v-if="statusClass === 'process' || statusClass === 'wait'"
						class="u-steps-item__wrapper__circle__text" :style="{
							color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
						}">{{ index + 1 }}</text>
					<u-icon v-else :color="statusClass === 'error' ? 'error' : parentData.activeColor" size="12"
						:name="statusClass === 'error' ? 'close' : 'checkmark'"></u-icon>
				</view>
			</slot>
		</view>
		<view class="u-steps-item__content" :class="[`u-steps-item__content--${parentData.direction}`]"
			:style="[contentStyle]">
			<slot name="title">
				<u--text :text="title" :type="parentData.current == index ? 'main' : 'content'" lineHeight="20px"
					:size="parentData.current == index ? 14 : 13"></u--text>
			</slot>

			<slot name="desc">
				<u--text :text="desc" type="tips" size="12"></u--text>
			</slot>
		</view>
		<!-- <view
		    class="u-steps-item__line"
		    v-if="showLine && parentData.direction === 'column'"
			:class="[`u-steps-item__line--${parentData.direction}`]"
		    :style="[lineStyle]"
		></view> -->
	</view>
</template>

<script>
import props from './props.js';
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
 * StepsItem 步骤条的子组件
 * @description 本组件需要和u-steps配合使用
 * @tutorial https://uviewui.com/components/steps.html
 * @property {String}			title			标题文字
 * @property {String}			current			描述文本
 * @property {String | Number}	iconSize		图标大小  (默认 17 )
 * @property {Boolean}			error			当前步骤是否处于失败状态  (默认 false )
 * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
 */
export default {
	name: 'u-steps-item',
	mixins: [mpMixin, mixin, props],
	data () {
		return {
			index: 0,
			childLength: 0,
			showLine: false,
			size: {
				height: 0,
				width: 0
			},
			parentData: {
				direction: 'row',
				current: 0,
				activeColor: '',
				inactiveColor: '',
				activeIcon: '',
				inactiveIcon: '',
				dot: false
			}
		}
	},
	watch: {
		'parentData' (newValue, oldValue) {
		}
	},
	created () {
		this.init()
	},
	computed: {
		lineStyle () {
			const style = {}
			if (this.parentData.direction === 'row') {
				style.width = this.size.width + 'px'
				style.left = this.size.width / 2 + 'px'
			} else {
				style.height = this.size.height + 'px'
				// style.top = this.size.height / 2 + 'px'
			}
			style.backgroundColor = this.parent.children?.[this.index + 1]?.error ? uni.$u.color.error : this.index <
				this
					.parentData
					.current ? this.parentData.activeColor : this.parentData.inactiveColor
			return style
		},
		statusClass () {
			const {
				index,
				error
			} = this
			const {
				current
			} = this.parentData
			if (current == index) {
				return error === true ? 'error' : 'process'
			} else if (error) {
				return 'error'
			} else if (current > index) {
				return 'finish'
			} else {
				return 'wait'
			}
		},
		statusColor () {
			let color = ''
			switch (this.statusClass) {
				case 'finish':
					color = this.parentData.activeColor
					break
				case 'error':
					color = uni.$u.color.error
					break
				case 'process':
					color = this.parentData.dot ? this.parentData.activeColor : 'transparent'
					break
				default:
					color = this.parentData.inactiveColor
					break
			}
			return color
		},
		contentStyle () {
			const style = {}
			if (this.parentData.direction === 'column') {
				style.marginLeft = this.parentData.dot ? '2px' : '6px'
				style.marginTop = this.parentData.dot ? '0px' : '6px'
			} else {
				style.marginTop = this.parentData.dot ? '2px' : '6px'
				style.marginLeft = this.parentData.dot ? '2px' : '6px'
			}

			return style
		}
	},
	mounted () {
		this.parent && this.parent.updateFromChild()
		uni.$u.sleep().then(() => {
			this.getStepsItemRect()
		})
	},
	methods: {
		init () {
			// 初始化数据
			this.updateParentData()
			if (!this.parent) {
				return uni.$u.error('u-steps-item必须要搭配u-steps组件使用')
			}
			this.index = this.parent.children.indexOf(this)
			this.childLength = this.parent.children.length
		},
		updateParentData () {
			// 此方法在mixin中
			this.getParentData('u-steps')
		},
		// 父组件数据发生变化
		updateFromParent () {
			this.init()
		},
		// 获取组件的尺寸，用于设置横线的位置
		getStepsItemRect () {
			// #ifndef APP-NVUE
			this.$uGetRect('.u-steps-item').then(size => {
				this.size = size
			})
			// #endif

			// #ifdef APP-NVUE
			dom.getComponentRect(this.$refs['u-steps-item'], res => {
				const {
					size
				} = res
				this.size = size
			})
			// #endif
		}
	}
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-steps-item {
	flex: 1;
	@include flex;

	&--row {
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	&--column {
		position: relative;
		flex-direction: row;
		justify-content: flex-start;
		padding-bottom: 5px;
	}

	&__wrapper {
		@include flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background-color: #fff;

		&--column {
			width: 20px;
			height: 32px;

			&--dot {
				height: 20px;
				width: 20px;
			}
		}

		&--row {
			width: 32px;
			height: 20px;

			&--dot {
				width: 20px;
				height: 20px;
			}
		}

		&__circle {
			width: 20px;
			height: 20px;
			/* #ifndef APP-NVUE */
			box-sizing: border-box;
			flex-shrink: 0;
			/* #endif */
			border-radius: 100px;
			border-width: 1px;
			border-color: $u-tips-color;
			border-style: solid;
			@include flex(row);
			align-items: center;
			justify-content: center;
			transition: background-color 0.3s;

			&__text {
				color: $u-tips-color;
				font-size: 11px;
				@include flex(row);
				align-items: center;
				justify-content: center;
				text-align: center;
				line-height: 11px;
			}
		}

		&__dot {
			width: 10px;
			height: 10px;
			border-radius: 100px;
			background-color: $u-content-color;
		}
	}

	&__content {
		@include flex;
		flex: 1;

		&--row {
			flex-direction: column;
			align-items: center;
		}

		&--column {
			flex-direction: column;
			margin-left: 6px;
		}
	}

	&__line {
		position: absolute;
		background: $u-tips-color;

		&--row {
			top: 10px;
			height: 1px;
		}

		&--column {
			width: 1px;
			left: 10px;
		}
	}
}
</style>
